<!--  -->
<template>
  <div class="goods-wrap">
    <div class="goods">
      <!-- 左边菜单栏 -->
      <div class="menu-wrap">
        <ul>
          <li v-for="(item,i) in GoodsInfo" :key="i" class="menu-item"
          :class="{'current':currentIndex === i}" @click="selectMenu(i)">
            <span class="text"><span v-show="item.type>0" class="icon"
              :class="classMap[item.type]"></span>{{item.name}}
            </span>
          </li>
        </ul>
      </div>
      <!-- 右边具体食品 -->
      <div class="foods-wrap" ref="foodswrap">
        <ul>
          <li v-for="(item,i) in GoodsInfo" :key="i" class="foods-list food-list-hook" ref="list">
            <h1 class="title">{{item.name}}</h1>
              <ul>
                <li @click="selectFood(food)" class="foods-item border-1px" v-for="(food,i) in item.foods" :key="i">
                  <img :src="food.icon"/>
                  <div class="content">
                    <h2 class="name">{{ food.name }}</h2>
                    <p class="desc" v-show="food.description">{{ food.description }}</p>
                    <div class="extra">
                      <span>月售{{ food.sellCount }}份</span>
                      <span>好评率{{ food.rating }}%</span>
                    </div>
                    <div class="price">
                      <span class="new-price">￥{{ food.price }}</span>
                      <span class="old-price" v-show="food.oldPrice">￥{{ food.oldPrice }}</span>
                      <div class="control-wrap">
                        <cartcontrol :food="food"></cartcontrol>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
          </li>
        </ul>
      </div>
    </div>
    <food :food="selectedFood" ref="food"></food>
  </div>
</template>

<script>
import cartcontrol from "../cartcontrol/cartcontrol.vue";
import food from "../food/food.vue";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      GoodsInfo: [
        {
          name: "热销榜",
          type: -1,
          foods: [
            {
              id: 1,
              name: "皮蛋瘦肉粥",
              price: 10,
              oldPrice: "",
              description: "咸粥",
              sellCount: 229,
              rating: 100,
              info:
                "一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "很喜欢的粥",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 1,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 2,
              name: "扁豆焖面",
              price: 14,
              oldPrice: "",
              description: "",
              sellCount: 188,
              rating: 96,
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 1,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              info: "",
              icon:
                "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 3,
              name: "葱花饼",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 124,
              rating: 85,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "没啥味道",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 1,
                  text: "很一般啊",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 4,
              name: "牛肉馅饼",
              price: 14,
              oldPrice: "",
              description: "",
              sellCount: 114,
              rating: 91,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "难吃不推荐",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 5,
              name: "招牌猪肉白菜锅贴/10个",
              price: 17,
              oldPrice: "",
              description: "",
              sellCount: 101,
              rating: 78,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "不脆,不好吃",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 6,
              name: "南瓜粥",
              price: 9,
              oldPrice: "",
              description: "甜粥",
              sellCount: 91,
              rating: 100,
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 7,
              name: "红豆薏米美肤粥",
              price: 12,
              oldPrice: "",
              description: "甜粥",
              sellCount: 86,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 8,
              name: "八宝酱菜",
              price: 4,
              oldPrice: "",
              description: "",
              sellCount: 84,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 9,
              name: "红枣山药糙米粥",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 81,
              rating: 91,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 10,
              name: "糊塌子",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 80,
              rating: 93,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "单人精彩套餐",
          type: 2,
          foods: [
            {
              id: 11,
              name: "红枣山药粥套餐",
              price: 29,
              oldPrice: 36,
              description:
                "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注",
              sellCount: 17,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "冰爽饮品限时特惠",
          type: 1,
          foods: [
            {
              id: 12,
              name: "VC无限橙果汁",
              price: 8,
              oldPrice: 10,
              description: "",
              sellCount: 15,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "还可以",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "精选热菜",
          type: -1,
          foods: [
            {
              id: 13,
              name: "娃娃菜炖豆腐",
              price: 17,
              oldPrice: "",
              description: "",
              sellCount: 43,
              rating: 92,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "菜量还可以,味道还可以",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 14,
              name: "手撕包菜",
              price: 16,
              oldPrice: "",
              description: "",
              sellCount: 29,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 15,
              name: "香酥黄金鱼/3条",
              price: 11,
              oldPrice: "",
              description: "",
              sellCount: 15,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "爽口凉菜",
          type: -1,
          foods: [
            {
              id: 16,
              name: "八宝酱菜",
              price: 4,
              oldPrice: "",
              description: "",
              sellCount: 84,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 17,
              name: "拍黄瓜",
              price: 9,
              oldPrice: "",
              description: "",
              sellCount: 28,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "精选套餐",
          type: -1,
          foods: [
            {
              id: 18,
              name: "红豆薏米粥套餐",
              price: 37,
              oldPrice: "",
              description: "红豆薏米粥,三鲜干蒸烧卖,拍黄瓜",
              sellCount: 3,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 19,
              name: "皮蛋瘦肉粥套餐",
              price: 31,
              oldPrice: "",
              description: "",
              sellCount: 12,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "果拼果汁",
          type: -1,
          foods: [
            {
              id: 20,
              name: "蜜瓜圣女萝莉杯",
              price: 6,
              oldPrice: "",
              description: "",
              sellCount: 1,
              rating: "",
              info: "",
              ratings: [],
              icon:
                "http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 21,
              name: "加多宝",
              price: 6,
              oldPrice: "",
              description: "",
              sellCount: 7,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 22,
              name: "VC无限橙果汁",
              price: 8,
              oldPrice: 10,
              description: "",
              sellCount: 15,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "还可以",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "小吃主食",
          type: -1,
          foods: [
            {
              id: 23,
              name: "扁豆焖面",
              price: 14,
              oldPrice: "",
              description: "",
              sellCount: 188,
              rating: 96,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 1,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 24,
              name: "葱花饼",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 124,
              rating: 85,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "没啥味道",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 1,
                  text: "很一般啊",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 25,
              name: "牛肉馅饼",
              price: 14,
              oldPrice: "",
              description: "",
              sellCount: 114,
              rating: 91,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "难吃不推荐",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 26,
              name: "招牌猪肉白菜锅贴/10个",
              price: 17,
              oldPrice: "",
              description: "",
              sellCount: 101,
              rating: 78,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 1,
                  text: "不脆,不好吃",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 27,
              name: "糊塌子",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 80,
              rating: 93,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        },
        {
          name: "特色粥品",
          type: -1,
          foods: [
            {
              id: 28,
              name: "皮蛋瘦肉粥",
              price: 10,
              oldPrice: "",
              description: "咸粥",
              sellCount: 229,
              rating: 100,
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "很喜欢的粥",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 1,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 29,
              name: "南瓜粥",
              price: 9,
              oldPrice: "",
              description: "甜粥",
              sellCount: 91,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 30,
              name: "红豆薏米美肤粥",
              price: 12,
              oldPrice: "",
              description: "甜粥",
              sellCount: 86,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 31,
              name: "红枣山药糙米粥",
              price: 10,
              oldPrice: "",
              description: "",
              sellCount: 81,
              rating: 91,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 32,
              name: "鲜蔬菌菇粥",
              price: 11,
              oldPrice: "",
              description: "咸粥",
              sellCount: 56,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: ""
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/750/h/750"
            },
            {
              id: 33,
              name: "田园蔬菜粥",
              price: 10,
              oldPrice: "",
              description: "咸粥",
              sellCount: 33,
              rating: 100,
              info: "",
              ratings: [
                {
                  username: "3******c",
                  rateTime: 1469281964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "2******3",
                  rateTime: 1469271264000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                },
                {
                  username: "3******b",
                  rateTime: 1469261964000,
                  rateType: 0,
                  text: "",
                  avatar:
                    "http://static.galileo.xiaojukeji.com/static/tms/default_header.png"
                }
              ],
              icon:
                "http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/114/h/114",
              image:
                "http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/750/h/750"
            }
          ]
        }
      ],
      classMap: ["decrease", "discount", "special", "invoice", "guarantee"],
      listHeight: [],
      scrollY: 0,
      // 被选中的食物
      selectedFood: {}
    };
  },
  components: { cartcontrol, food },
  props: ["seller"],
  methods: {
    // 获取商品信息
    // getGoods() {
    //   this.$http.get("/api/goods").then(result => {
    //     if (result.status === 200) {
    //       this.GoodsInfo = result.body.data;
    //       this.$nextTick(() => {
    //         this._initScroll();
    //         this._getListHeight();
    //       });
    //     }
    //   });
    // },
    // 点击左侧菜单，跳转到对应的分类食品栏
    // 1.将循环创建的菜单栏元素的索引作为参数传入
    // 2.获取foodslist中对应索引的offsetTop值
    // 3.点击菜单栏时，offsetTop值赋值给右侧的scrollTop
    selectMenu(i) {
      let foodList = this.$refs.foodswrap.getElementsByClassName(
        "food-list-hook"
      );
      let el = foodList[i];
      this.foodScroll.scrollToElement(el, 100);
    },
    // 点击商品显示商品详情页面
    selectFood(food) {
      this.selectedFood = food;
      // 调用food组件的show方法显示food组件
      this.$refs.food.show();
    },
    // 左右两个菜单的滚动效果
    _initScroll() {
      this.meunScroll = new BScroll(".menu-wrap", {
        click: true
      });
      this.foodScroll = new BScroll(".foods-wrap", {
        click: true,
        // 探针作用，实时监测滚动位置
        probeType: 3
      });
      this.foodScroll.on("scroll", pos => {
        // scrollY接收变量
        this.scrollY = Math.abs(Math.round(pos.y));
      });
    },
    // 将每个分类的食品的offsetTop依次添加到foodslist中，组成一个foodslist数组
    _getListHeight() {
      let foodList = this.$refs.foodswrap.getElementsByClassName(
        "food-list-hook"
      );
      for (let i = 0; i < foodList.length; i++) {
        this.listHeight.push(foodList[i].offsetTop);
      }
    }
  },
  computed: {
    currentIndex() {
      for (let i = 0; i < this.listHeight.length; i++) {
        let height1 = this.listHeight[i];
        let height2 = this.listHeight[i + 1];
        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
          return i;
        }
      }
      return 0;
    }
  },
  created() {
    // this.getGoods();
    this.$nextTick(() => {
      this._initScroll();
      this._getListHeight();
    });
  }
};
</script>
<style lang='less' scoped>
@import "../../common/css/common.less";
.goods-wrap {
  position: absolute;
  top: 174px;
  left: 0;
  right: 0;
  bottom: 0;
  .goods {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 46px;
    display: flex;
    overflow: hidden;
    width: 100%;
    .menu-wrap {
      flex: 0 0 80px;
      background-color: #f3f5f7;
      //隐藏滚动条，兼容性？
      // overflow: auto;
      // &::-webkit-scrollbar {
      //   display: none;
      // }
      .menu-item {
        display: table;
        text-align: center;
        width: 80px;
        height: 56px;
        padding: 0 12px;
        box-sizing: border-box;
        vertical-align: bottom;
        &.current {
          position: relative;
          z-index: 10;
          background-color: #fff;
          font-weight: 700;
          margin-top: -1px;
          .text {
            border: none;
          }
        }
        .font-style(0,14px,200);
        .icon {
          display: inline-block;
          width: 12px;
          height: 12px;
          margin-right: 2px;
          vertical-align: bottom;
          background-size: 12px 12px;
          &.decrease {
            .bg-image("decrease_3");
          }
          &.discount {
            .bg-image("discount_3");
          }
          &.guarantee {
            .bg-image("guarantee_3");
          }
          &.invoice {
            .bg-image("invoice_3");
          }
          &.special {
            .bg-image("special_3");
          }
        }
        .text {
          display: table-cell;
          vertical-align: middle;
          text-align: left;
          font-size: 12px;
        }
      }
    }
    .foods-wrap {
      flex: 1;
      // overflow-y: auto;
      //隐藏滚动条，兼容性？
      // &::-webkit-scrollbar {
      //   display: none;
      // }
      .foods-list {
        .title {
          height: 26px;
          padding-left: 12px;
          border-left: 2px solid #d9dde1;
          background-color: #f3f5f7;
          .font-style(12px,26px);
          color: rgb(147, 153, 159);
        }
        .foods-item {
          margin: 18px;
          padding-bottom: 18px;
          font-size: 0;
          // overflow-x: hidden;
          // white-space: nowrap;
          // text-overflow: ellipsis;
          display: flex;
          .border-1px(rgba(7,17,27,0.2));
          &:last-child {
            padding-bottom: 0;
            &::after {
              display: none;
            }
          }
          img {
            margin-right: 10px;
            width: 57px;
            height: 57px;
            vertical-align: top;
          }
          .content {
            flex: 1;
            .name {
              margin: 2px 0 8px;
              .font-style(14px,14px);
              color: rgb(7, 17, 27);
            }
            .desc,
            .extra {
              margin-bottom: 8px;
              .font-style(10px,12px);
              color: rgb(147, 153, 159);
            }
            .extra {
              margin-bottom: 6px;
              &:first-child {
                margin-right: 12px;
              }
            }
            .price {
              .new-price {
                margin-right: 8px;
                .font-style(14px,24px,700);
                color: red;
              }
              .old-price {
                .font-style(10px,24px,700);
                color: rgb(147, 153, 159);
                text-decoration: line-through;
              }
              .control-wrap {
                position: absolute;
                right: 20px;
                display: inline-block;
                vertical-align: top;
              }
            }
          }
        }
      }
    }
  }
}
</style>